<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no" />
	<link rel="stylesheet" href="css/bootstrap.css">
	<link rel="stylesheet" href="wb/css/mui.min.css">
	<link rel="stylesheet" href="css/reset.css">
	<link rel="stylesheet" href="css/index.css">
	<title>我的订单列表</title>
	<style>
		body{
			background: rgb(229,229,229);
		}
		.mui-scroll{
			position: relative;
		}
	</style>
</head>
<body>
	<div class="mylistchoose">
		<div class="row nomarpad-row mylist-row">
			<div class="col-xs-3 myalllist mylisting">
				全部
			</div>
			<div class="col-xs-3 notpaylist">
				未支付
			</div>
			<div class="col-xs-3 paylisted">
				已支付
			</div>
			<div class="col-xs-3 nowantlist">
				已取消
			</div>
		</div>
	</div>
	<div class="container" style="margin-bottom: 50px;">
		<div class="myloading">
				<div class="loading" id="PullUp">
					<span class="glyphicon glyphicon-refresh sxing"></span>
					<p class="pullUpLabel">正在加载数据</p>
				</div>
		</div>
		<div class="mylistbox" id="mylistbox">
			<div class="mui-scroll" id="mui-scroll"></div>
			<!-- <a href="">
				<div class="mylists">
					<p class="mylists-time">下单时间:2017-12-09 15:36:22 <span>待支付</span></p>
					<div class="payinfo-header mylists-header">
						<div class="headerimg">
							<img src="images/head.jpg" alt="">
						</div>
						<div class="payheader-words mylists-words">
							<p class="info-ke">高中数学课程服务</p>
							<p class="info-teacher">李老师 <span class="mylists-money">￥<b class="myonemoney ">300</b>/小时</span></p>
						</div>
					</div>
					<p class="mylists-togle">共计10课次,20课时 <span>总金额：6000元</span></p>
					<div class="mylists-button">
						<button type="submit" >去支付</button>
					</div>
				</div>
			</a>-->
			<div class="notRules">
				<img src="images/notrules.png" alt="">
				<p>您还没有相关订单</p>
			</div>
		</div>
	</div>

	
</body>
<script src="js/jquery.js"></script>
<script src="wb/js/mui.min.js"></script>
<script>
	//没有记录的情况  1.改变BODY的背景颜色  2.没有记录的盒子展示
	// $('body').css('background','white'); 
	// $('.notRules').show();

	/*未支付*/
	$('.notpaylist').on('click',function(){
		$('body').css('background','white'); 
		$('.mylistbox').hide();
		$('.myloading').show();
		setTimeout(function(){
			$('body').css('background','rgb(229,229,229)'); 
			$('.mylistbox').show();
			$('.myloading').hide();
		},3000);		
	})

	/*已支付*/
	$('.paylisted').on('click',function(){
		$('body').css('background','white'); 
		$('.mylistbox').hide();
		$('.myloading').show();
		setTimeout(function(){
			$('body').css('background','white');
			$('.myloading').hide(); 
			$('.mylistbox').show();
			$('.notRules').show();
			$('.mylists').hide();
		},3000);		
	})


	$(function(){

		document.getElementById('mylistbox').style.height = window.screen.availHeight -90+'px';	
		pulluptoRefresmui();

	})

function pulluptoRefresmui() {
	//加载下一个页面
	mui.init({
		pullRefresh: {
			container: '#mylistbox',
			up: {
				height: 50, // 可选.默认50.触发上拉加载拖动距离
				callback: pullupRefresh,
				contentrefresh: '正在刷新...',
				auto: true
			}
		}
	});
	//上拉加载回调方法
	function pullupRefresh() {
//		if(pageNo > totalpage) {
//			mui.toast('没有更多数据了！');
//		}
		setTimeout(function() {
			mui('#mylistbox').pullRefresh().endPullupToRefresh();
//			if(totalpage >= pageNo) {
				method();
//			}
		}, 200);
	}
}
function method(){
	var str = '<a class="clickA" href="http://www.baidu.com"><div class="mylists"><p class="mylists-time">下单时间:2017-12-09 15:36:22 <span>已支付/未上课</span></p><div class="payinfo-header mylists-header"><div class="headerimg"><img src="images/head.jpg" alt=""></div><div class="payheader-words mylists-words"><p class="info-ke">高中数学课程服务</p><p class="info-teacher">李老师 <span class="mylists-money">￥<b class="myonemoney ">300</b>/小时</span></p></div></div><p class="mylists-togle">共计10课次,20课时 <span>总金额：6000元</span></p><div class="mylists-button"><button type="submit" >去支付</button></div></div></a>';


	str = str + str +str;

	$('.mui-scroll').append(str);
	
}


	$('.mylist-row .col-xs-3').on('click',function(){
		$(this).addClass("mylisting").siblings().removeClass("mylisting");
	});


	$('.mui-scroll').on('tap','.clickA',function(){
		var myhref = $(this).attr('href');
		window.location.href=myhref;
	})

</script>
</html>